<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{height:'100%'}">
      <div class="basicInfo">
        <div class="left">
          <div class="navBar">
            <img src="~@/assets/img/navBar.jpg" alt />
          </div>
          <div class="content">
            <div style="position: relative; z-index: 8;">
              <div class="page-title">
                <img src="~@/assets/img/wxappMusic.png" alt class="fl" />
                <div class="phoneSelect fr">
                  <img src="~@/assets/img/wxappPhone.png" alt />
                </div>
                <div class="titleBar">
                  <span class="view">
                    <span class="num">546</span> 人查看
                  </span>
                  <span class="sign">
                    <span class="num">439</span> 人报名
                  </span>
                </div>
              </div>
              <div class="carousel">
                <div class="placeholder">请上传轮播图</div>
              </div>
            </div>
            <div class="contact">
              <div class="selectBox">
                <div class="contentBox">
                  <div class="contentBox-title">联系方式</div>
                  <div class="contentBox-body">
                    <div class="contentBox-text" v-html="editorContent"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="introduce">
              <div class="selectBox">
                <div class="contentBox">
                  <div class="contentBox-title">机构介绍</div>
                  <div class="contentBox-body">
                    <div class="contentBox-text" v-html="editorContent"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="makeUp">
            <div class="rightForm">
              <div class="formModelLine">
                <span class="title">轮播图：</span>
                <span>
                  <span style="width:48px;height:48px; border:1px solid #000;"></span>
                  <p class="desc">(用于轮播展示，请上传小于5M的JPG/PNG图片，最多可上传3张)</p>
                </span>
              </div>
              <div class="formModelLine">
                <span class="title">联系方式：</span>
                <span>
                  <span>
                    <div id="basicInfo">
                      <div
                        ref="editorElem"
                        class="contentArea"
                        style="text-align:left;width:390px;"
                      ></div>
                    </div>
                    <!-- <textarea placeholder="请输入" v-model="value" style="width:390px;" /> -->
                  </span>
                  <div v-html="value"></div>
                  <p class="desc">请填写机构联系电话、联系人、机构地址，方便用户联系</p>
                </span>
              </div>
              <div class="formModelLine">
                <span class="title">机构介绍：</span>
                <span>
                  <span>
                    <a-textarea placeholder="请输入" style="width:390px;"></a-textarea>
                  </span>
                  <p class="desc">建议上传店面环境图、参赛获奖图、课堂实景图、师生互动图、机构logo等（请上传小于5M的JPG/PNG图片）</p>
                </span>
              </div>
              <div class="formModelLine">
                <span class="title">机构名称：</span>
                <span>
                  <span>
                    <a-input placeholder="请输入" :max-length="15" style="width:390px;"></a-input>
                  </span>
                  <p class="desc">名称将用于部分活动页/支付确认页的展示，≤15个字</p>
                </span>
              </div>
              <div class="formModelLine">
                <span class="title">机构电话：</span>
                <span>
                  <span>
                    <a-input placeholder="请输入" style="width:390px;"></a-input>
                  </span>
                  <p class="desc">设置机构电话后，家长可快速拨打电话进行咨询</p>
                </span>
              </div>
            </div>
          </div>
          <div class="btnAction">
            <a-button type="primary">保存</a-button>
            <a-button style="margin-left:10px;">取消</a-button>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'Editor',
  mounted() {
    this.editor = new E(this.$refs.editorElem)
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    this.editor.customConfig.menus = []
    this.editor.create() // 创建富文本实例
  },
  data() {
    return {
      //富文本
      editor: null,
      editorContent: '',

      wrapperCol: {
        span: 14,
      },
      value: undefined,
      form: {},
    }
  },
  watch: {

  },
}
</script>
<style lang="less">
#basicInfo {
  .contentArea {
    .w-e-toolbar {
      border: none !important;
    }
    .w-e-text-container {
      border-top:1px solid #ccc !important;
      height: 100px !important;
      border-radius:5px;
    }
  }
}
</style>
<style lang="less" scoped>
.basicInfo {
  display: flex;
  justify-content: space-between;
  min-height: 500px;
  .left {
    width: 280px;
    height: 500px;
    border: 1px solid #e8e8e8;
    position: relative;
    background: #d42a31;
    .navBar {
      position: absolute;
      z-index: 1111;
      height: 47px;
      img {
        width: 100%;
      }
    }
    .content {
      padding-bottom: 42px;
      margin-top: 47px;
      height: 100%;
      overflow-y: auto;
      .page-title {
        position: absolute;
        width: 100%;
        padding: 4px;
        z-index: 1111;
        img {
          width: 26px;
          vertical-align: middle;
          margin: 8px;
        }
        .fl {
          float: left;
        }
        .fr {
          float: right;
        }
        .phoneSelect {
          display: inline-block;
          border: 2px dashed rgba(255, 234, 0, 0);
          img {
            width: 26px;
            vertical-align: middle;
            margin: 6px;
          }
        }
        .titleBar {
          position: absolute;
          width: 80%;
          height: 20px;
          line-height: 20px;
          z-index: -1;
          left: 26px;
          top: 15px;
          text-align: center;
          background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3), transparent);
          .view {
            color: #fff;
            font-size: 16px;
            .num {
              color: #ffb700;
              font-size: 16px;
            }
          }
          .sign {
            color: #fff;
            font-size: 16px;
            margin-left: 20px;
            .num {
              color: #ffb700;
              font-size: 16px;
            }
          }
        }
      }
      .carousel {
        width: 100%;
        height: 168px;
        border: 2px dashed rgba(255, 234, 0, 0);
        background: #fafafa;
        text-align: center;
        .placeholder {
          margin-top: 46px;
          font-size: 18px;
        }
      }
      .contact,
      .introduce {
        padding: 6px 2px 0;
        overflow: hidden;
        .selectBox {
          padding: 0 6px 6px;
          .contentBox {
            position: relative;
            margin-top: 32px;
            border-radius: 5px;
            background: #fff;
            .contentBox-title {
              position: absolute;
              top: -15px;
              margin: 0 auto;
              left: 0;
              right: 0;
              width: 90px;
              height: 30px;
              line-height: 30px;
              color: #c10f08;
              border: 2px solid;
              border-radius: 5px;
              text-align: center;
              font-size: 18px;
              background: #ffb700;
            }
            .contentBox-body {
              padding: 20px 10px;
              overflow: auto;
              .contentBox-text {
                font-size: 18px;
                color: #454545;
              }
            }
          }
        }
      }
    }
  }
  .right {
    width: 60%;
    border: 1px solid #e8e8e8;
    height: 700px;
    .makeUp {
      height: 640px;
      overflow-y: auto;
      .rightForm {
        padding: 24px;
        .formModelLine {
          border-bottom: 1px solid #e2e2e2;
          padding: 8px 0 16px;
          margin-bottom: 16px;
          span {
            display: inline-block;
            vertical-align: top;
            .desc {
              color: #999;
              margin-top: 9px;
            }
          }
          .title {
            width: 70px;
            text-align: right;
          }
        }
        .formModelLine:last-child {
          border-bottom: none;
        }
      }
    }
    .btnAction {
      padding: 12px 24px;
      border-top: 1px solid #e8e8e8;
    }
  }
}
</style>